<script src="{{ asset('js/jquery-1.8.3.min.js') }}" type="text/javascript"></script>
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<meta name="_token" content="{{csrf_token()}}">
<link rel="stylesheet" href="{{URL::asset('./css/reset.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/order/sure_order.css')}}">

<!-- home.activity.actPay -->
<div class="main" id="actpay" v-cloak>
    <div class="payheader">
        <a href="{{route('home.index.index') }}">
            <img :src="headerLogo" alt="">
        </a>
        <div class='rightStep'>
            <div class="completed-step active"><a>确认信息</a></div>
            <div class="completed-step"><a>支付金额</a></div>
            <div class="completed-step"><a>购买完成</a></div>
        </div>
    </div>
    <div class="orderMes">
        <p class="checkMes">填写核对订单信息</p>
        <p class="takegoodsMes">收货信息</p>
        <div class="addrMesDiv">
            <p>
                姓名：<span>
                    @{{addressInfo.realname}}

                </span>
            </p>
            <p>
                地址：
                <span>
                    @{{addressInfo.area}}
                    @{{addressInfo.detail}}
                </span>
            </p>
            <p>
                电话：
                <span>
                    @{{addressInfo.phone}}
                </span>
            </p>
            <p>
                <button @click="sessionStorage.setItem('payAddr', window.location.href);window.location.href = '{{ route('home.hrmy.hrAddressAdd') }}?addrId='+addressInfo.id">编辑</button>
            </p>
        </div>
    </div>
    <div class="applymes">
        <span>商品信息</span>
        <table v-for="item in storeGoodsTotal">
            <thead>
                <tr>
                    <th colspan="5">供应商：@{{item.store_name}}</th>
                </tr>
                <tr>
                    <th>
                        订单编号
                    </th>
                    <th>
                        商品名称
                    </th>
                    <th>
                        供应商
                    </th>
                    <th>
                        数量
                    </th>
                    <th>
                        支付金额
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="list in item.goods_list">
                    <td>@{{list.goods_id}}</td>
                    <td>@{{list.goods_name}}</td>
                    <td>@{{list.store_name}}</td>
                    <td>@{{list.goods_num}}</td>
                    <td v-if="list.goods_type==3">@{{list.goods_total}}积分</td>
                    <td v-else>￥@{{list.goods_total}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <p class="payMony" style="align-items:flex-end">
        商品金额：<span v-if="listData.order_goods_type==3">
            @{{listData.order_goods_amount}}积分
        </span>
        <span v-else>
            ￥@{{listData.order_goods_amount}}
        </span>
    </p>
    <p class="payMony" style="align-items:flex-end" v-if="listData.order_goods_type!=3">
        邮费：
        <span>
            ￥@{{listData.order_freight_total}}
        </span>
    </p>

    <div class="submitOrder">
        订单支付&nbsp;<span v-if="listData.order_goods_type==3">
            @{{listData.order_goods_total}}积分
        </span>
        <span v-else>
            ￥@{{listData.order_goods_total}}
        </span>
        <button @click="submit">
            提交订单
        </button>
    </div>

</div>
<script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/element.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/public.js') }}" type="text/javascript"></script>
<script>
    $(() => {
        let app = new Vue({
            el: '#actpay',
            data: () => {
                return {
                    headerLogo: '',
                    checkNum: 1,
                    goodsId: getQueryString("goodsId"),
                    goods_num: getQueryString("num"),
                    ifcart: getQueryString("ifcart"),
                    addressInfo: {},
                    storeGoodsTotal: [],
                    listData: {},
                }
            },
            created() {
                this.headerLogo = JSON.parse(sessionStorage.getItem("overall")).site_logo
                this.getDetails();
            },
            mounted() {},
            methods: {
                getDetails() {
                    let orderInfo = [];
                    let data = {}
                    if (this.ifcart == '0') {
                        orderInfo = [{
                            id: this.goodsId,
                            num: this.goods_num
                        }];
                        data = {
                            ifcart: this.ifcart,
                            order_info: JSON.stringify(orderInfo)
                        }
                    } else {
                        let a = JSON.parse(sessionStorage.getItem("cartData"))
                        a.forEach(element => {
                            orderInfo.push({
                                id: element.id,
                                num: element.num
                            })
                        });
                        data = {
                            ifcart: this.ifcart,
                            order_info: JSON.stringify(orderInfo)
                        }
                    }
                    apiAjax("{{ route('home.order.buyStep1')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            if (res.data.address_info) {
                                this.listData = res.data;
                                this.addressInfo = res.data.address_info;
                                this.storeGoodsTotal = res.data.store_cart_list;
                                sessionStorage.removeItem("payAddr");
                            } else {
                                this.$message({
                                    message: "请先去添加地址",
                                    type: 'warning'
                                });
                                setTimeout(() => {
                                    window.location.href = "{{ route('home.hrmy.hrAddressAdd') }}"
                                }, 1000);
                                sessionStorage.setItem("payAddr", window.location.href);
                            }
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                            setTimeout(() => {
                                window.history.go(-1)
                            }, 1000);
                        }
                    }, (erro) => {

                    });
                },
                submit() {
                    let orderInfo = [];
                    let data = {}
                    if (this.ifcart == '0') {
                        orderInfo = [{
                            id: this.goodsId,
                            num: this.goods_num
                        }];
                        data = {
                            ifcart: this.ifcart,
                            order_info: JSON.stringify(orderInfo),
                            order_from: 1,
                            address_id: this.addressInfo.id
                        }
                    } else {
                        let a = JSON.parse(sessionStorage.getItem("cartData"))
                        a.forEach(element => {
                            orderInfo.push({
                                id: element.id,
                                num: element.num
                            })
                        });
                        data = {
                            ifcart: this.ifcart,
                            order_info: JSON.stringify(orderInfo),
                            order_from: 1,
                            address_id: this.addressInfo.id
                        }
                    }
                    if (this.listData.order_goods_type != 3) {
                        apiAjax("{{ route('home.order.buyStep2')}}", 'get', data, (res) => {
                            if (res.code == 0) {
                                // this.$message({
                                //     message: res.msg,
                                //     type: 'success'
                                // });
                                sessionStorage.removeItem("payAddr");
                                window.location.href = "{{ route('home.order.payOrder') }}?orderId=" + res.data.id + '&ifcart=' + this.ifcart
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        }, (erro) => {

                        });
                    } else {
                        apiAjax("{{ route('home.order.buyPoint')}}", 'post', data, (res) => {
                            if (res.code == 0) {
                                // this.$message({
                                //     message: res.msg,
                                //     type: 'success'
                                // });
                                this.$message({
                                    message: "支付成功",
                                    type: 'success'
                                });
                                window.location.href = "{{ route('home.order.completeOrder') }}"
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        }, (erro) => {

                        });

                    }
                }
            }
        })
    })
</script>